<template>
	<div class="front">
		<el-input v-model="searchText" placeholder="输入关键字" style="margin: 10px 0!important"></el-input>
		<div class="tree">
			<el-tree :data="treeData" accordion node-key="id" :default-expanded-keys="dfExpKeys" :props="defaultProps" :filter-node-method="filterNode" ref="tree" @node-click="nodeClick" :default-expand-all="true" highlight-current :expand-on-click-node="false"></el-tree>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			searchText: '',
			treeData: [],
			dfExpKeys: [],
			defaultProps: {
				label: 'name',
                children: 'accountItems'
			}
		}
	},
	watch: {
        searchText(val){
            this.$refs.tree.filter(val);
        }
    },
	methods: {
		getTreeData() {			//获取树形结构数据
			this.$http.get('accountItem/select').then(res => {
				if(res.data.code == 20001) {
					if(res.data.data) {
						this.treeData = res.data.data;
					}
				}
			});
		},
		filterNode(value, data) {               //部门选择里面的搜索框
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
		nodeClick(row) {
			this.$store.commit('checkItemsStore/updateParentId', row['id']);
			this.$store.commit('checkItemsStore/updateParentName', row['name']);
			this.close();
		},
		close() {           //关闭新增弹窗
            let index = parent.layer.getFrameIndex(window.name);    //先得到当前iframe层的索引
            parent.layer.close(index);
        }
	},
	mounted() {
		this.getTreeData();
	}
}
</script>
<style scoped>
	.tree {height: calc(100% - 60px);box-sizing: border-box;}
	.tree .el-tree {height: 100% !important;overflow-y: auto !important;}
</style>